import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import SelectedLists from './SelectedLists';
import { VARIABLE_TYPE } from 'src/utils/constant';
import './tab.less';

export default function Tab(props) {
  const [result, setResult] = useState([]);
  const [tabName, setTabName] = useState('');

  useEffect(() => {
    const result = props.variable
      ? props.variable.map((item) => (item.content && item.content instanceof Array ? item.content.length : false))
      : [];
    setResult(result);
  }, []);
  useEffect(() => {
    const names = props.type || (props.variable[0] && props.variable[0].key);
    setTabName(names);
  }, [props]);
  function setValue(value, type) {
    value.var_code = value.code;
    value.var_name = value.name;

    delete value.code;
    delete value.name;

    props.onHandleVisible && props.onHandleVisible(false);
    props.onSetValue && props.onSetValue(value, type);
  }

  // 切换
  function handelChange(e) {
    setTabName(e);
  }

  function getResultLength(index, len) {
    result[index] = len;
    setResult([...result]);
  }
  return (
    <div className='tab-count-style'>
      {props.variable && (
        <Tabs
          onChange={handelChange}
          defaultActiveKey={props.type || (props.variable[0] && props.variable[0].key)}
          style={{ width: '350px', height: '100%' }}
        >
          {props.variable.map((item, index) => {
            const isLists = item.name && item.content instanceof Array ? true : false;
            const isLen = item.name !== VARIABLE_TYPE._LITERAL;
            const name = isLen ? (
              <>
                {item.label}
                <span className='tab-list-count'>{result[index]}</span>
              </>
            ) : (
              item.label
            );
            return (
              <Tabs.TabPane tab={name} key={item.key}>
                {isLists ? (
                  <SelectedLists
                    type={item.name}
                    data={item.content}
                    value={
                      props.value && props.type === VARIABLE_TYPE._STRATEGY ? `${props.value},RiskLevel` : props.value
                    }
                    onHandleResultLength={getResultLength.bind(this, index)}
                    onCallback={(value) => setValue(value, VARIABLE_TYPE._FIELD)}
                    // event_id={props.event_id}
                  />
                ) : (
                  <>
                    {React.cloneElement(item.content, {
                      onCallback: (value) => setValue(value, VARIABLE_TYPE._LITERAL),
                      onHandleVisible: props.onHandleVisible,
                      value: props.value,
                      // event_id: props.event_id,
                      current_type: props.type,
                      type: item.name,
                      tabName: tabName,
                      onHandleResultLength: getResultLength.bind(this, index),
                    })}
                  </>
                )}
              </Tabs.TabPane>
            );
          })}
        </Tabs>
      )}
    </div>
  );
}
